Why client-side solutions weren’t enough

• Not all HTML/CSS properties are supported.
• All content must be provided from the same origin due to security issues (so you’ll have to proxy all of your third-party assets!)
• Performance wise, these are heavy tasks to run in the browser when the UI gets complex.

Taking the implementation to the server

Goals:

• Flexible PDF creation flow: We wanted to be able to create a PDF from any program flow, such as a download click in the browser or an offline scheduled task that triggers an email with a PDF attachment.
• Use the same React component for the web view and the PDF export: We didn’t want to maintain separate UI logic for the web and PDF outputs. This allowed us to provide a consistent experience in both modes and helped to minimize the effort of creating new components (we just had to make sure they played nice on the server).

Our solution:

• Use React SSR (server-side rendering) to generate static HTML for React components: While you would usually use SSR for performance/SEO optimization or tests, here we used it to generate a static web asset on the server.
• Use Puppeteer to generate a PDF from the HTML: Puppeteer is a Node.js library that provides a high-level API to control Chrome or Chromium using the DevTools Protocol. Puppeteer also provides an API to generate screenshots and PDFs of pages.

Step A - Render your (React) component on the server

// ./ssr/src/index.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import MyFancyReport from './components/MyFancyReport';
export function renderStaticReport(reportProps) {
  const reportMarkup = ReactDOMServer.renderToStaticMarkup(
    <MyFancyReport {...reportProps} />
  );
  return `
     <!doctype html>
     <html lang="en">
       <head>
         <meta charset="utf-8">
       </head>
       <body>
         ${reportMarkup}
       </body>
     </html>
  `;
}

• Use the Web API carefully: It includes interaction with global browser objects like Document, Window, Navigator, and LocalStorage. These are not part of the Node.js runtime, and you will either have to check if they are defined and handle logic accordingly, or add a new entry point for your SSR bundle to polyfill them.
• Use React lifecycle hooks carefully - ReactDomServer.renderToStaticMarkup() is a synchronous single-pass render function, which means that some hooks won’t apply, including useEffect and useState, same for lifecycle methods like componentDidMount and componentDidUpdate. It is possible, however, to use the component constructor and the componentWillMount method.

Step B - Webpack config

// ./webpack.config.js
const path = require('path');
const webpack = require('webpack');
// existing config
const clientWebpackConfig = {
  ...
};
// new SSR config
const ssrWebpackConfig = {
  ...clientWebpackConfig,
  entry: './ssr/src/index.js',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'ssr/lib'),
    filename: 'ssrService.js',
    libraryTarget: 'commonjs2',
  },
};
module.exports = [clientWebpackConfig, ssrWebpackConfig];

Step C - Extend our server’s functionality to create a PDF

// ./services/pdfService.js
const puppeteer = require('puppeteer');
const ssrService = require('../ssr/lib/ssrService.js');
const MY_PDF_PORTION = {
  width: 1766,
  height: 1000,
};
module.exports.generatePdfFromHtml = async (htmlStr) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport(MY_PDF_PORTION);
  await page.setContent(htmlStr, { waitUntil: 'networkidle0' });
  const pdfBuffer = await page.pdf({ printBackground: true });
  await browser.close();
  return pdfBuffer;
};

Summary